<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="工单列表" data-page-identification="c_ywr6oo0s9g">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_56q5auz3n0 自定义模板_9naw5vucd4 -->
            <!--          新建模板-->
            <a-modal
                :visible="state.addOrEditVisible"
                :title="state.modalTitle"
                centered
                width="1000px"
                :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
                @ok="submit"
                @cancel="cancelTemplate"
                :ok-button-props="{ loading: state.fatherLoading }"
            >
                <div class="form-content">
                    <a-form :model="state.modalForm" ref="formRef">
                        <div class="form-top">
                            <a-row>
                                <a-col :span="24">
                                    <a-form-item
                                        label="工单模板名称"
                                        :rules="[{ required: true, message: '请输入工单模板名称', trigger: 'blur' }]"
                                        name="content"
                                    >
                                        <a-input v-model:value="state.modalForm.content" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item
                                        label="工单类型"
                                        :rules="[{ required: true, message: '请选择工单类型', trigger: 'blur' }]"
                                        name="type"
                                    >
                                        <a-select
                                            show-search
                                            :options="state.gdlxList"
                                            v-model:value="state.modalForm.type"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="场景类型">
                                        <a-select
                                            show-search
                                            :options="state.cjlxList"
                                            v-model:value="state.modalForm.sceneType"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="监控场景">
                                        <a-select
                                            show-search
                                            :options="state.jkcjList"
                                            v-model:value="state.modalForm.monitorScene"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            @focus="getJkcj(state.modalForm.sceneType)"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="优先级">
                                        <a-select
                                            show-search
                                            :options="state.yxjList"
                                            v-model:value="state.modalForm.priority"
                                            :filterOption="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="所属客户">
                                        <a-select
                                            show-search
                                            :options="state.customList"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                            v-model:value="state.modalForm.customer"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="所属产品">
                                        <a-select
                                            show-search
                                            :options="state.customList"
                                            v-model:value="state.modalForm.production"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="问题来源">
                                        <a-select
                                            :options="state.wtlyList"
                                            v-model:value="state.modalForm.questionSource"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="middle-top">
                            <div class="form-title"> 工单触发抄送人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            :max-tag-count="1"
                                            v-model:value="state.modalForm.triggerCc.userList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :max-tag-count="1"
                                            :options="state.jsList"
                                            v-model:value="state.modalForm.triggerCc.roleList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :max-tag-count="1"
                                            :options="state.yhzList"
                                            v-model:value="state.modalForm.triggerCc.userGroupList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="form-title"> 工单超时抄送人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            v-model:value="state.modalForm.timeoutCc.userList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :options="state.jsList"
                                            :max-tag-count="1"
                                            v-model:value="state.modalForm.timeoutCc.roleList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :options="state.yhzList"
                                            v-model:value="state.modalForm.timeoutCc.userGroupList"
                                            placeholder="请选择"
                                            :max-tag-count="1"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="超时提醒频率">
                                        <a-checkbox-group
                                            v-model:value="state.modalForm.timeoutFrequencyList"
                                            style="width: 100%"
                                        >
                                            <a-checkbox value="单次">单次</a-checkbox>
                                            <a-checkbox value="后续工作日早晚通知">后续工作日早晚通知</a-checkbox>
                                        </a-checkbox-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                        <!--                      开始节点-->
                        <div class="start-son">
                            <div class="start-title" style="color: #3875ff; font-size: 16px">子工单开始节点</div>
                        </div>
                        <div class="son-middle">
                            <div class="son-top">
                                <a-row>
                                    <a-col :span="24">
                                        <a-form-item
                                            label="子工单标题"
                                            :rules="[{ required: true, message: '请输入子工单标题', trigger: 'blur' }]"
                                            :name="['headSub', 'content']"
                                        >
                                            <a-input v-model:value="state.modalForm.headSub.content" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item label="优先级">
                                            <a-select
                                                :options="state.yxjList"
                                                v-model:value="state.modalForm.headSub.priority"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item label="计划解决时长">
                                            <a-input-number v-model:value="state.modalForm.headSub.hjjsc" />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>
                            <div class="form-title"> 解决人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            :max-tag-count="1"
                                            v-model:value="state.modalForm.headSub.solverCc.userList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :options="state.jsList"
                                            v-model:value="state.modalForm.headSub.solverCc.roleList"
                                            placeholder="请选择"
                                            :max-tag-count="1"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :options="state.yhzList"
                                            :max-tag-count="1"
                                            v-model:value="state.modalForm.headSub.solverCc.userGroupList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div
                                class="start-sop"
                                v-for="(startSopItem, startSopIndex) in state.modalForm.headSub.sopList"
                                :key="startSopIndex"
                            >
                                <a-col :span="24">
                                    <a-form-item label="执行SOP">
                                        <a-textarea
                                            v-model:value="state.modalForm.headSub.sopList[startSopIndex].value"
                                        />
                                    </a-form-item>
                                </a-col>
                                <div class="start-sop-btn">
                                    <a-button
                                        type="link"
                                        size="small"
                                        @click="handleAddStartSop"
                                        v-if="startSopIndex == state.modalForm.headSub.sopList.length - 1"
                                    >
                                        <template #icon><PlusOutlined /></template>新增</a-button
                                    >
                                    <a-button size="small" type="link" @click="handleDeleteStartSop(index)"
                                        ><template #icon><DeleteOutlined /></template>删除</a-button
                                    >
                                </div>
                            </div>
                            <a-col :span="24">
                                <a-form-item label="附件模板">
                                    <a-upload
                                        v-model:file-list="state.modalForm.headSub.attachmentTemplateList"
                                        :multiple="true"
                                        :before-upload="handlerStartUpload"
                                        @remove="handlerStartRemove"
                                        accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                    >
                                        <a-button type="primary">
                                            <upload-outlined />
                                            上传
                                        </a-button>
                                    </a-upload>
                                    <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                                </a-form-item>
                            </a-col>
                            <div
                                class="start-lcfz"
                                v-for="(startLcfzItem, startLcfzIndex) in state.modalForm.headSub.processBranchList"
                                :key="startLcfzIndex"
                            >
                                <a-col :span="24">
                                    <a-form-item label="流程分支">
                                        <a-textarea
                                            v-model:value="
                                                state.modalForm.headSub.processBranchList[startLcfzIndex].value
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <div class="start-lcfz-btn">
                                    <a-button
                                        type="link"
                                        size="small"
                                        @click="handleAddStartLcfz"
                                        v-if="startLcfzIndex == state.modalForm.headSub.processBranchList.length - 1"
                                    >
                                        <template #icon><PlusOutlined /></template>新增</a-button
                                    >
                                    <a-button size="small" type="link" @click="handleDeleteStartLcfz(index)"
                                        ><template #icon><DeleteOutlined /></template>删除</a-button
                                    >
                                </div>
                            </div>
                            <div class="form-title"> 节点触发抄送人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            v-model:value="state.modalForm.headSub.triggerCc.userList"
                                            placeholder="请选择"
                                            :max-tag-count="1"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :options="state.jsList"
                                            v-model:value="state.modalForm.headSub.triggerCc.roleList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :options="state.yhzList"
                                            v-model:value="state.modalForm.headSub.triggerCc.userGroupList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="form-title"> 节点超时抄送人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            v-model:value="state.modalForm.headSub.timeoutCc.userList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :options="state.jsList"
                                            v-model:value="state.modalForm.headSub.timeoutCc.roleList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :options="state.yhzList"
                                            v-model:value="state.modalForm.headSub.timeoutCc.userGroupList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="超时提醒频率">
                                        <a-checkbox-group
                                            v-model:value="state.modalForm.headSub.timeoutFrequencyList"
                                            style="width: 100%"
                                        >
                                            <a-checkbox value="单次">单次</a-checkbox>
                                            <a-checkbox value="后续工作日早晚通知">后续工作日早晚通知</a-checkbox>
                                        </a-checkbox-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                        <!--                      开始节点-->
                        <a-button
                            size="small"
                            type="primary"
                            ghost
                            @click="handleAddSonGd"
                            v-if="state.modalForm.subList.length == 0"
                        >
                            <template #icon><PlusOutlined /></template>新增子工单</a-button
                        >

                        <div class="son-gd" v-for="(item, index) in state.modalForm.subList">
                            <div class="son-title">
                                <div> 子工单 </div>
                                <a-space>
                                    <a-button
                                        size="small"
                                        type="primary"
                                        ghost
                                        @click="handleAddSonGd"
                                        v-if="index == state.modalForm.subList.length - 1"
                                    >
                                        <template #icon><PlusOutlined /></template>新增</a-button
                                    >
                                    <a-button size="small" type="primary" ghost @click="handleDeleteSonGd(index)">
                                        <template #icon><DeleteOutlined /></template>删除</a-button
                                    >
                                </a-space>
                            </div>
                            <a-row>
                                <a-col :span="24">
                                    <a-form-item
                                        label="子工单标题"
                                        :rules="[{ required: true, message: '请输入子工单标题', trigger: 'blur' }]"
                                        :name="['subList', index, 'content']"
                                    >
                                        <a-input v-model:value="state.modalForm.subList[index].content" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="依赖工单">
                                        <a-select
                                            v-model:value="state.modalForm.subList[index].dependencyName"
                                            show-search
                                            allow-clear
                                            :options="getChildrenSelect(index)"
                                            :fieldNames="{
                                                label: 'label',
                                                value: 'value'
                                            }"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item
                                        label="前置判断条件"
                                        :rules="[
                                            {
                                                required:
                                                    getChildrenQzpdtj(index) &&
                                                    getChildrenQzpdtj(index).hasLcfz &&
                                                    state.modalForm.subList[index].dependencyName, // 根据 lcfz 是否有值来动态控制必填
                                                message: '请选择前置判断条件'
                                            }
                                        ]"
                                        :name="['subList', index, 'branchCondition']"
                                    >
                                        <a-select
                                            :disabled="getChildrenQzpdtj(index) && !getChildrenQzpdtj(index).hasLcfz"
                                            v-model:value="state.modalForm.subList[index].branchCondition"
                                            show-search
                                            allow-clear
                                            :options="getChildrenQzpdtj(index)?.selectList"
                                            :fieldNames="{
                                                label: 'label',
                                                value: 'value'
                                            }"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="优先级">
                                        <a-select
                                            :options="state.yxjList"
                                            v-model:value="state.modalForm.subList[index].priority"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item label="计划解决时长">
                                        <a-input-number v-model:value="state.modalForm.subList[index].hjjsc" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="form-title"> 解决人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            v-model:value="state.modalForm.subList[index].solverCc.userList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :options="state.jsList"
                                            v-model:value="state.modalForm.subList[index].solverCc.roleList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :options="state.yhzList"
                                            v-model:value="state.modalForm.subList[index].solverCc.userGroupList"
                                            placeholder="请选择"
                                            :max-tag-count="1"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div
                                class="start-sop"
                                v-for="(startSopItem, startSopIndex) in state.modalForm.subList[index].sopList"
                                :key="startSopIndex"
                            >
                                <a-col :span="24">
                                    <a-form-item label="执行SOP">
                                        <a-textarea
                                            v-model:value="state.modalForm.subList[index].sopList[startSopIndex].value"
                                        />
                                    </a-form-item>
                                </a-col>
                                <div class="start-sop-btn">
                                    <a-button
                                        size="small"
                                        type="link"
                                        @click="handleAddSonSop(index)"
                                        v-if="startSopIndex == state.modalForm.subList[index].sopList.length - 1"
                                    >
                                        <template #icon><PlusOutlined /></template>新增</a-button
                                    >
                                    <a-button size="small" type="link" @click="handleDeleteSonSop(index)"
                                        ><template #icon><DeleteOutlined /></template>删除</a-button
                                    >
                                </div>
                            </div>
                            <a-col :span="24">
                                <a-form-item label="附件模板">
                                    <a-upload
                                        v-model:file-list="state.modalForm.subList[index].attachmentTemplateList"
                                        :multiple="true"
                                        :before-upload="file => handlerSonUpload(file, index)"
                                        @remove="file => handlerSonRemove(file, index)"
                                        accept=".xlsx, image/*,.docx,, .xls,.mp4"
                                    >
                                        <a-button type="primary">
                                            <upload-outlined />
                                            上传
                                        </a-button>
                                    </a-upload>
                                    <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                                </a-form-item>
                            </a-col>
                            <div
                                class="start-lcfz"
                                v-for="(startLcfzItem, startLcfzIndex) in state.modalForm.subList[index]
                                    .processBranchList"
                                :key="startLcfzIndex"
                            >
                                <a-col :span="24">
                                    <a-form-item label="流程分支">
                                        <a-textarea
                                            v-model:value="
                                                state.modalForm.subList[index].processBranchList[startLcfzIndex].value
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <div class="start-lcfz-btn">
                                    <a-button
                                        type="link"
                                        @click="handleAddSonLcfz(index)"
                                        v-if="
                                            startLcfzIndex ==
                                            state.modalForm.subList[index].processBranchList.length - 1
                                        "
                                    >
                                        <template #icon><PlusOutlined /></template>新增</a-button
                                    >
                                    <a-button type="link" @click="handleDeleteSonLcfz(index)"
                                        ><template #icon><DeleteOutlined /></template>删除</a-button
                                    >
                                </div>
                            </div>
                            <div class="form-title"> 节点触发抄送人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            v-model:value="state.modalForm.subList[index].triggerCc.userList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :options="state.jsList"
                                            v-model:value="state.modalForm.subList[index].triggerCc.roleList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :options="state.yhzList"
                                            v-model:value="state.modalForm.subList[index].triggerCc.userGroupList"
                                            placeholder="请选择"
                                            :max-tag-count="1"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="form-title"> 节点超时抄送人 </div>
                            <a-row>
                                <a-col :span="8">
                                    <a-form-item label="人员">
                                        <a-select
                                            mode="multiple"
                                            :options="state.allUser"
                                            v-model:value="state.modalForm.subList[index].timeoutCc.userList"
                                            placeholder="请选择"
                                            :max-tag-count="1"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="角色">
                                        <a-select
                                            mode="multiple"
                                            :options="state.jsList"
                                            v-model:value="state.modalForm.subList[index].timeoutCc.roleList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="用户组">
                                        <a-select
                                            mode="multiple"
                                            :options="state.yhzList"
                                            v-model:value="state.modalForm.subList[index].timeoutCc.userGroupList"
                                            placeholder="请选择"
                                            :field-names="{ label: 'name', value: 'name' }"
                                            :max-tag-count="1"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="超时提醒频率">
                                        <a-checkbox-group
                                            v-model:value="state.modalForm.subList[index].timeoutFrequencyList"
                                            style="width: 100%"
                                        >
                                            <a-checkbox value="单次">单次</a-checkbox>
                                            <a-checkbox value="后续工作日早晚通知">后续工作日早晚通知</a-checkbox>
                                        </a-checkbox-group>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                    </a-form>
                </div>
            </a-modal>
            <!--          新建模板-->
            <div class="top-search">
                <div class="top-left">
                    <a-form :model="state.filter">
                        <a-row justify="space-between">
                            <a-col :span="5">
                                <a-form-item label="工单类型" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.type"
                                        :options="state.gdlxList"
                                        show-search
                                        allow-clear
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="优先级" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.priority"
                                        :options="state.yxjList"
                                        allow-clear
                                        placeholder="请选择"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="场景类型" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.sceneType"
                                        :options="state.cjlxList"
                                        allow-clear
                                        placeholder="请选择"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="监控场景" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.monitorScene"
                                        :options="state.jkcjList"
                                        allow-clear
                                        placeholder="请选择"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @focus="getJkcj(state.filter.sceneType)"
                                    />
                                </a-form-item>
                            </a-col>

                            <a-col :span="4">
                                <a-form-item label="客户" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.customer"
                                        :options="state.customList"
                                        allow-clear
                                        placeholder="请选择"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row justify="space-between">
                            <a-col :span="5">
                                <a-form-item label="产品" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        show-search
                                        v-model:value="state.filter.production"
                                        :options="state.productList"
                                        allow-clear
                                        placeholder="请选择"
                                        @focus="getProductList"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="问题来源" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-select
                                        v-model:value="state.filter.questionSource"
                                        :options="state.wtlyList"
                                        show-search
                                        allow-clear
                                        placeholder="请选择"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="创建时间" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                    <a-range-picker
                                        v-model:value="state.filter.createdTimeList"
                                        value-format="YYYY-MM-DD"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" label="创建人">
                                    <a-select
                                        show-search
                                        allow-clear
                                        :options="state.allUser"
                                        v-model:value="state.filter.createdBy"
                                        placeholder="请选择"
                                        :field-names="{ label: 'name', value: 'name' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="4" style="display: flex; justify-content: end; align-items: start">
                                <a-space>
                                    <a-button type="primary" @click="getData(true)">查询</a-button>
                                    <a-button type="primary" ghost @click="resetData">重置</a-button>
                                </a-space>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </div>
            <div class="main">
                <a-spin v-model:spinning="dataLoading" tip="加载中">
                    <div class="main-title">
                        <div class="top-tip"
                            ><ExclamationCircleFilled class="tip-img" />
                            解决人接收流转的工单后，如距离计划解决时间较近，请及时联系创建人编辑调整，避免工单延期对自己造成影响</div
                        >
                        <a-space>
                            <a-form-item label="排序" style="margin: 0">
                                <a-select
                                    style="width: 150px"
                                    :options="state.sortList"
                                    v-model:value="state.sort"
                                    @change="getData"
                                    allow-clear
                                />
                            </a-form-item>
                            <a-button type="primary" @click="handleAdd">新建</a-button>
                            <a-button type="primary" @click="handleExpandAll" v-if="!newState.isExpandAll"
                                >全部展开</a-button
                            >
                            <a-button type="primary" @click="handleCollapseAll" v-else>全部折叠</a-button>
                        </a-space>
                    </div>
                    <div class="gd-scroll">
                        <div class="gd-item" v-for="(item, index) in state.dataList">
                            <a-collapse
                                :bordered="false"
                                expandIconPosition="right"
                                v-model:activeKey="state.collapseKey"
                            >
                                <template #expandIcon="{ isActive }"> </template>
                                <a-collapse-panel :key="item.id">
                                    <template #header>
                                        <div class="collapse-title">
                                            <div class="collapse-title-top">
                                                <div class="title-tip">
                                                    <a-space :size="8">
                                                        <div v-if="/(p0|P0)/i.test(item.priority)" class="ceycle0"
                                                            >P0</div
                                                        >
                                                        <div v-if="/(p1|P1)/i.test(item.priority)" class="ceycle1"
                                                            >P1</div
                                                        >
                                                        <div v-if="/(p2|P2)/i.test(item.priority)" class="ceycle2"
                                                            >P2</div
                                                        >
                                                        <div v-if="/(p3|P3)/i.test(item.priority)" class="ceycle3"
                                                            >P3</div
                                                        >

                                                        <div v-if="item.questionSource === '400'" class="ph-icon"
                                                            >400</div
                                                        >
                                                        <div v-if="item.questionSource === '现场反馈'" class="xc-icon"
                                                            >现场反馈</div
                                                        >
                                                        <div v-if="item.questionSource === '系统自检'" class="zj-icon"
                                                            >系统自检</div
                                                        >
                                                    </a-space>
                                                </div>
                                                <div class="template-name">
                                                    {{ item.content }}
                                                </div>
                                                <div class="top-right-btn">
                                                    <a-space :size="8">
                                                        <a-button type="primary" size="small" v-if="item.status&&item.status=='待发布'" ghost @click="handleFb"
                                                            >发布</a-button
                                                        >
                                                        <a-button type="primary" v-else size="small" ghost @click="handleXx"
                                                            >下线</a-button
                                                        >
                                                        <a-button
                                                            type="primary"
                                                            size="small"
                                                            ghost
                                                            @click.stop="handleEdit(item)"
                                                            >编辑</a-button
                                                        >
                                                        <a-popconfirm
                                                            title="请确认是否重新打开工单？"
                                                            @confirm="handlerDelete(item.id)"
                                                        >
                                                            <a-button type="primary" size="small" ghost>删除</a-button>
                                                        </a-popconfirm>
                                                    </a-space>
                                                </div>
                                            </div>
                                            <div class="collapse-title-bottom">
                                                <div class="item-inner">
                                                    <div class="item-content item-content1">
                                                        <div class="inner">
                                                            <div class="inner-title">子工单流程数：</div>
                                                            <div class="inner-msg" :title="item.subCount">{{
                                                                item.subCount
                                                            }}</div>
                                                        </div>
                                                        <div class="inner">
                                                            <div class="inner-title">场景类型：</div>
                                                            <div class="inner-msg" :title="item.sceneType">{{
                                                                item.sceneType
                                                            }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="item-content item-content2">
                                                        <div class="inner">
                                                            <div class="inner-title">创建时间：</div>
                                                            <div class="inner-msg" :title="item.createdTime">{{
                                                                item.createdTime
                                                            }}</div>
                                                        </div>
                                                        <div class="inner">
                                                            <div class="inner-title">监控场景：</div>
                                                            <div class="inner-msg" :item="item.monitorScene">{{
                                                                item.monitorScene
                                                            }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="item-content item-content3">
                                                        <div class="inner">
                                                            <div class="inner-title">创建人：</div>
                                                            <div class="inner-msg" :title="item.createdBy">{{
                                                                item.createdBy
                                                            }}</div>
                                                        </div>
                                                        <div class="inner">
                                                            <div class="inner-title">工单触发抄送人：</div>
                                                            <div class="inner-msg" :title="item.triggerCc.user">{{
                                                                item.triggerCc.user
                                                            }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="item-content item-content4">
                                                        <div class="inner">
                                                            <div class="inner-title">计划解决时长：</div>
                                                            <div class="inner-msg" :title="item.workHours">{{
                                                                item.workHours
                                                            }}</div>
                                                        </div>
                                                        <div class="inner">
                                                            <div class="inner-title">工单超时抄送人：</div>
                                                            <div class="inner-msg" :title="item.timeoutCc.user">{{
                                                                item.timeoutCc.user
                                                            }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="item-content item-content5">
                                                        <div class="inner">
                                                            <div class="inner-title">状态：</div>
                                                            <div class="inner-msg" :title="item.status">{{
                                                                item.status
                                                            }}</div>
                                                        </div>
                                                        <div class="inner">
                                                            <div class="inner-title">工单超时提醒频率：</div>
                                                            <div class="inner-msg">{{ item.timeoutFrequency }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <!--                           列表父工单-->

                                    <!--                           列表父工单-->
                                    <!--                         子工单-->
                                    <div class="collapse-bottom">
                                        <div class="item-children">
                                            <div class="child-title">
                                                <div class="child-title-left">
                                                    <div class="gd-title">{{ item.headSub.content }}</div>
                                                </div>
                                            </div>
                                            <div class="child-inner">
                                                <div class="children-content children-content1">
                                                    <div class="inner">
                                                        <div class="inner-title">依赖工单：</div>
                                                        <div class="inner-msg">{{ item.headSub.dependencyName }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">解决人：</div>
                                                        <div class="inner-msg" :title="item.headSub.solverCc.user">{{
                                                            item.headSub.solverCc.user
                                                        }}</div>
                                                    </div>
                                                </div>
                                                <div class="children-content children-content2">
                                                    <div class="inner">
                                                        <div class="inner-title">前置条件分支：</div>
                                                        <div class="inner-msg" :title="item.headSub.branchCondition">{{
                                                            item.headSub.branchCondition
                                                        }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">节点触发抄送人：</div>
                                                        <div class="inner-msg" :title="item.headSub.triggerCc.user">{{
                                                            item.headSub.triggerCc.user
                                                        }}</div>
                                                    </div>
                                                </div>
                                                <div class="children-content children-content3">
                                                    <div class="inner">
                                                        <div class="inner-title">优先级：</div>
                                                        <div class="inner-msg" :title="item.headSub.priority">{{
                                                            item.headSub.priority
                                                        }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">节点超时抄送人：</div>
                                                        <div class="inner-msg" :title="item.headSub.timeoutCc.user">{{
                                                            item.headSub.timeoutCc.user
                                                        }}</div>
                                                    </div>
                                                </div>
                                                <div class="children-content children-content4">
                                                    <div class="inner">
                                                        <div class="inner-title">计划解决时长：</div>
                                                        <div class="inner-msg" :title="item.headSub.workHours">{{
                                                            item.headSub.workHours
                                                        }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">节点超时提醒频率：</div>
                                                        <div class="inner-msg" :title="item.headSub.timeoutFrequency">{{
                                                            item.headSub.timeoutFrequency
                                                        }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="child-bottom">
                                                <div class="child-sop">
                                                    <div class="inner-title">SOP：</div>
                                                    <div class="inner-message">{{
                                                        item.headSub.sopList?.map(item => item.value).join(', ')
                                                    }}</div>
                                                </div>
                                                <div class="child-file">
                                                    <div class="inner-title">附件模板：</div>
                                                    <div class="inner-message child-file-content">
                                                        <a
                                                            href="javaScript:;"
                                                            v-for="(file, fileIndex) in item.headSub
                                                                .attachmentTemplateList"
                                                            @click="handlerDownload(file)"
                                                            >{{ file.name }}</a
                                                        >
                                                    </div>
                                                </div>
                                                <div class="child-clfz">
                                                    <div class="inner-title">流程分支：</div>
                                                    <div class="inner-message">{{
                                                        item.headSub.processBranchList
                                                            ?.map(item => item.value)
                                                            .join(', ')
                                                    }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item-children" v-for="(child, index) in item.subList" :key="index">
                                            <div class="child-title">
                                                <div class="child-title-left">
                                                    <div class="gd-title">{{ child.content }}</div>
                                                </div>
                                            </div>
                                            <div class="child-inner">
                                                <div class="children-content children-content1">
                                                    <div class="inner">
                                                        <div class="inner-title">依赖工单：</div>
                                                        <div class="inner-msg">{{ item.dependencyName }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">解决人：</div>
                                                        <div class="inner-msg" :title="item.solverCc.user">{{
                                                            item.solverCc.user
                                                        }}</div>
                                                    </div>
                                                </div>
                                                <div class="children-content children-content2">
                                                    <div class="inner">
                                                        <div class="inner-title">前置条件分支：</div>
                                                        <div class="inner-msg" :title="item.branchCondition">{{
                                                            item.branchCondition
                                                        }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">节点触发抄送人：</div>
                                                        <div class="inner-msg" :title="item.triggerCc.user">{{
                                                            item.triggerCc.user
                                                        }}</div>
                                                    </div>
                                                </div>
                                                <div class="children-content children-content3">
                                                    <div class="inner">
                                                        <div class="inner-title">优先级：</div>
                                                        <div class="inner-msg" :title="item.priority">{{
                                                            item.priority
                                                        }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">节点超时抄送人：</div>
                                                        <div class="inner-msg" :title="item.timeoutCc.user">{{
                                                            item.timeoutCc.user
                                                        }}</div>
                                                    </div>
                                                </div>
                                                <div class="children-content children-content4">
                                                    <div class="inner">
                                                        <div class="inner-title">计划解决时长：</div>
                                                        <div class="inner-msg" :title="item.workHours">{{
                                                            item.workHours
                                                        }}</div>
                                                    </div>
                                                    <div class="inner">
                                                        <div class="inner-title">节点超时提醒频率：</div>
                                                        <div class="inner-msg" :title="item.timeoutFrequency">{{
                                                            item.timeoutFrequency
                                                        }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="child-bottom">
                                                <div class="child-sop">
                                                    <div class="inner-title">SOP：</div>
                                                    <div class="inner-message">{{
                                                        item.sopList?.map(item => item.value).join(', ')
                                                    }}</div>
                                                </div>
                                                <div class="child-file">
                                                    <div class="inner-title">附件模板：</div>
                                                    <div class="inner-message child-file-content">
                                                        <a
                                                            href="javaScript:;"
                                                            v-for="(file, fileIndex) in item.attachmentTemplateList"
                                                            @click="handlerDownload(file)"
                                                            >{{ file.name }}</a
                                                        >
                                                    </div>
                                                </div>
                                                <div class="child-clfz">
                                                    <div class="inner-title">流程分支：</div>
                                                    <div class="inner-message">{{
                                                        item.processBranchList?.map(item => item.value).join(', ')
                                                    }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--                         子工单-->
                                </a-collapse-panel>
                            </a-collapse>
                        </div>
                    </div>
                </a-spin>
            </div>
            <!--            <div class="pagination-div">-->
            <!--                <a-pagination-->
            <!--                    v-model:current="pagination.current"-->
            <!--                    :total="pagination.total"-->
            <!--                    :show-total="pagination.showTotal"-->
            <!--                    :page-size="pagination.pageSize"-->
            <!--                    show-quick-jumper-->
            <!--                    @show-size-change="pageSizeChange"-->
            <!--                    @change="pageChange"-->
            <!--                />-->
            <!--            </div>-->
            <!-- end vid_56q5auz3n0 自定义模板_9naw5vucd4 -->
            <!-- begin vid_qm6uj3uc2d 图片_oyechqv0p3 -->
            <al-image
                v-if="false"
                class="vid_qm6uj3uc2d"
                :emptyImgSrc="''"
                :src="vid_qm6uj3uc2d_props.src"
            />
            <!-- end vid_qm6uj3uc2d 图片_oyechqv0p3 -->
            <!-- begin vid_wvjq4lo2yf 图片_iaiexyrfqt -->
            <al-image
                v-if="false"
                class="vid_wvjq4lo2yf"
                :emptyImgSrc="''"
                :src="vid_wvjq4lo2yf_props.src"
            />
            <!-- end vid_wvjq4lo2yf 图片_iaiexyrfqt -->
            <!-- begin vid_wby2nignvk 图片_czm1uqu1ms -->
            <al-image
                v-if="false"
                class="vid_wby2nignvk"
                :emptyImgSrc="''"
                :src="vid_wby2nignvk_props.src"
            />
            <!-- end vid_wby2nignvk 图片_czm1uqu1ms -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')
    const vid_qm6uj3uc2d_imageUrl = 'http://10.40.0.33:9001/file-storage/469958199879835648.png'

    const vid_qm6uj3uc2d_props = reactive({
        src: vid_qm6uj3uc2d_imageUrl
    })
    const vid_wvjq4lo2yf_imageUrl = 'http://10.40.0.33:9001/file-storage/469958216751423488.png'

    const vid_wvjq4lo2yf_props = reactive({
        src: vid_wvjq4lo2yf_imageUrl
    })
    const vid_wby2nignvk_imageUrl = 'http://10.40.0.33:9001/file-storage/469958229367889920.png'

    const vid_wby2nignvk_props = reactive({
        src: vid_wby2nignvk_imageUrl
    })

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    //     富文本设置
    import { nextTick } from 'vue'
    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)
        // 获取单个参数
        state.filter.keyWords = urlParams.get('name')
        getAllUser()
        getData()
        getCustomerList()
        getBaseList()
    })
    const dataLoading = ref(false)
    const pageSizeChange = (current, size) => {
        pagination.value.current = current
        pagination.value.pageSize = size
        getData()
    }
    const pageChange = (page, pageSize) => {
        pagination.value.current = page
        pagination.value.pageSize = pageSize
        getData()
    }
    const pagination = ref({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0,
        pageSizeOptions: ['20', '40', '60', '80', '100'],
        showTotal: total =>
            `共 ${total} 个项目 第 ${pagination.value.current}/${Math.ceil(total / pagination.value.pageSize)}页`
    })
    // const activeKey = ref('全部工单')
    const state = reactive({
        filter: {
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            status: '',
            timeout: undefined,
            customer: undefined,
            monitorScene: undefined,
            sceneType: undefined,
            keyWords: undefined,
            number: undefined,
            factoryCode: undefined,
            production: undefined,
            pmName: undefined,
            pmoName: undefined,
            environment: undefined,
            createdBy: undefined,
            solverName: undefined,
            factoryType: undefined,
            createdTimeList: []
        },
        treeData: [],

        statusList: [
            {
                label: '未开始',
                value: '未开始'
            },
            {
                label: '解决中',
                value: '解决中'
            },
            {
                label: '已解决',
                value: '已解决'
            },
            {
                label: '已关闭',
                value: '已关闭'
            },
            {
                label: '已回访',
                value: '已回访'
            }
        ],
        changeStausList: [
            {
                label: '正在处理',
                value: '正在处理'
            },
            {
                label: '已解决',
                value: '已解决'
            },
            {
                label: '无需解决',
                value: '无需解决'
            },
            {
                label: '申请流转',
                value: '申请流转'
            }
        ],
        changeHaveSonStausList: [],
        sortList: [
            {
                label: '工单类型正序',
                value: 'type-asc'
            },
            {
                label: '工单类型倒序',
                value: 'type-desc'
            },
            {
                label: '优先级正序',
                value: 'priority-asc'
            },
            {
                label: '优先级倒序',
                value: 'priority-desc'
            },
            {
                label: '工单状态正序',
                value: 'status-asc'
            },
            {
                label: '工单状态倒序',
                value: 'status-desc'
            },
            {
                label: '工单解决进度正序',
                value: 'progress-asc'
            },
            {
                label: '工单解决进度倒序',
                value: 'progress-desc'
            },
            {
                label: '所属区域正序',
                value: 'area_code-asc'
            },
            {
                label: '所属区域倒序',
                value: 'area_code-desc'
            },
            {
                label: '所属项目阶段正序',
                value: 'milepost_id-asc'
            },
            {
                label: '所属项目阶段倒序',
                value: 'milepost_id-desc'
            },
            {
                label: '所属客户正序',
                value: 'customer-asc'
            },
            {
                label: '所属客户倒序',
                value: 'customer-desc'
            },
            {
                label: '所属产品正序',
                value: 'production-asc'
            },
            {
                label: '所属产品倒序',
                value: 'production-desc'
            },
            {
                label: '所属环境正序',
                value: 'environment-asc'
            },
            {
                label: '所属环境倒序',
                value: 'environment-desc'
            },
            {
                label: '创建人正序',
                value: 'created_by-asc'
            },
            {
                label: '创建人倒序',
                value: 'created_by-desc'
            },
            {
                label: '创建时间正序',
                value: 'created_time-asc'
            },
            {
                label: '创建时间倒序',
                value: 'created_time-desc'
            },
            {
                label: '解决人正序',
                value: 'solver-asc'
            },
            {
                label: '解决人倒序',
                value: 'solver-desc'
            },
            {
                label: '计划完成时间正序',
                value: 'end_time-asc'
            },
            {
                label: '计划完成时间倒序',
                value: 'end_time-desc'
            },
            {
                label: '实际完成时间正序',
                value: 'finish_time-asc'
            },
            {
                label: '实际完成时间倒序',
                value: 'finish_time-desc'
            }
        ],
        dataList: [],
        sort: 'created_time-desc',
        collapseKey: [],
        addOrEditVisible: false,
        modalTitle: '',
        gdlxList: [],
        cjlxList: [],
        jkcjList: [],
        yxjList: [],
        sskhList: [],
        sscpList: [],
        wtlyList: [],
        modalForm: {
            type: undefined,
            sceneType: undefined,
            monitorScene: undefined,
            priority: undefined,
            customer: undefined,
            production: undefined,
            questionSource: undefined,
            triggerCc: {
                userList: [],
                roleList: [],
                userGroupList: []
            },
            timeoutCc: {
                userList: [],
                roleList: [],
                userGroupList: []
            },
            timeoutFrequencyList: [],
            // 开始节点
            headSub: {
                content: undefined,
                priority: undefined,
                timeoutFrequencyList: undefined,
                solverCc: {
                    userList: [],
                    roleList: [],
                    userGroupList: []
                },
                attachmentTemplateList: [],
                sopList: [{ value: '' }],
                processBranchList: [{ value: '' }],
                triggerCc: {
                    userList: [],
                    roleList: [],
                    userGroupList: []
                },
                timeoutCc: {
                    userList: [],
                    roleList: [],
                    userGroupList: []
                },
                timeoutFrequencyList: []
            },
            // 子工单
            subList: [
                {
                    id: 1,
                    content: '',
                    dependencyName: undefined,
                    branchCondition: undefined,
                    priority: undefined,
                    timeoutFrequencyList: undefined,
                    solverCc: {
                        userList: [],
                        roleList: [],
                        userGroupList: []
                    },
                    sopList: [{ value: '' }],
                    attachmentTemplateList: [],
                    processBranchList: [{ value: '' }],
                    triggerCc: {
                        userList: [],
                        roleList: [],
                        userGroupList: []
                    },
                    timeoutCc: {
                        userList: [],
                        roleList: [],
                        userGroupList: []
                    },
                    timeoutFrequencyList: []
                }
            ]
        },
        fatherLoading: false,
        sonLoading: false,
        editSonVisible: false,
        deleteLoading: false,
        attachmentTemplateList: [
            {
                id: 1
            }
        ],
        fileVisible: false,
        remarkVisible: false,
        remarks: '',
        changeHaveSonStatusVisible: false,
        deleteVisible: false,
        areaList: [],
        projectList: [],
        milepostList: [],
        customList: [],
        environmentList: [],
        searchEnvironmentList: [],
        productList: [
            {
                label: '大模型平台',
                value: '大模型平台'
            },
            {
                label: '水泥配料',
                value: '水泥配料'
            },
            {
                label: '其他',
                value: '其他'
            }
        ],
        allUser: [],
        yhzList: [],
        jsList: [],
        pmNameList: [],
        previewImage: '',
        previewVisible: false
    })
    function getPmo() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/role/search/PMO').then(data => {
            state.pmoList = data.data.map(item => {
                return {
                    label: item,
                    value: item
                }
            })
        })
    }

    // 获取产品
    // 产品
    function getProductList() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/product}`).then(data => {
            state.productList = data.data
        })
    }

    const currentData = ref({})
    //     新建工单
    function handleAdd() {
        resetCurrentData()
        state.addOrEditVisible = true
        state.modalTitle = '新建工单模板'
    }
    function getTreeData() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/tree/search').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.treeData = data.data
        })
    }
    //     编辑工单
    async function handleEdit(record) {
        currentData.value = record
        state.modalForm = cloneDeep(record)
        state.addOrEditVisible = true
        state.modalTitle = '编辑工单模板'
    }
    function handlerDelete(id) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/work_order_template/${id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }

    // 区域
    function getAreaList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/area_info').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.areaList = data.data.map(item => {
                return {
                    label: item.areaName,
                    value: item.areaCode
                }
            })
        })
    }
    function getCustomerList() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/customer?areaCode=`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.customList = data.data
        })
    }

    //     父工单提交表单
    function submit() {
        formRef.value.validate().then(data => {
            // const { id, componentName, componentType, ...oldData } = sameData
            state.fatherLoading = true
            const api = currentData.value.id ? put : post
            api('/solution-ppm/api/v2/built-in-system-ppm/work_order_template', state.modalForm)
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    cancelTemplate()
                    getData()
                })
                .finally(() => {
                    state.fatherLoading = false
                })
        })
    }
    function cancelTemplate() {
        state.addOrEditVisible = false
        state.modalForm = {
            type: undefined,
            sceneType: undefined,
            monitorScene: undefined,
            priority: undefined,
            customer: undefined,
            production: undefined,
            questionSource: undefined,
            triggerCc: {
                userList: [],
                roleList: [],
                userGroupList: []
            },
            timeoutCc: {
                userList: [],
                roleList: [],
                userGroupList: []
            },
            timeoutFrequencyList: [],
            // 开始节点
            headSub: {
                content: undefined,
                priority: undefined,
                timeoutFrequencyList: undefined,
                solverCc: {
                    userList: [],
                    roleList: [],
                    userGroupList: []
                },
                attachmentTemplateList: [],
                sopList: [{ value: '' }],
                processBranchList: [{ value: '' }],
                triggerCc: {
                    userList: [],
                    roleList: [],
                    userGroupList: []
                },
                timeoutCc: {
                    userList: [],
                    roleList: [],
                    userGroupList: []
                },
                timeoutFrequencyList: []
            },
            // 子工单
            subList: [
                {
                    id: 1,
                    content: '',
                    dependencyName: undefined,
                    branchCondition: undefined,
                    priority: undefined,
                    timeoutFrequencyList: undefined,
                    solverCc: {
                        userList: [],
                        roleList: [],
                        userGroupList: []
                    },
                    sopList: [{ value: '' }],
                    attachmentTemplateList: [],
                    processBranchList: [{ value: '' }],
                    triggerCc: {
                        userList: [],
                        roleList: [],
                        userGroupList: []
                    },
                    timeoutCc: {
                        userList: [],
                        roleList: [],
                        userGroupList: []
                    },
                    timeoutFrequencyList: []
                }
            ]
        }
    }
    const formRef = ref(null)

    // 子上传附件
    function handlerStartUpload(file) {
        state.sonLoading = true
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 去重，保留一个副本
                    state.modalForm.headSub.attachmentTemplateList = [
                        // 保留已存在文件（去除重复）
                        ...state.modalForm.headSub.attachmentTemplateList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        // 添加新的文件
                        newFile
                    ]
                }
                state.sonLoading = false
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }
    function handlerStartRemove(file) {
        state.modalForm.headSub.attachmentTemplateList = state.modalForm.headSub.attachmentTemplateList.filter(
            item => item.uid !== file.uid
        )
    }
    // 子上传附件

    function resetCurrentData() {
        currentData.value = {}
    }
    const quillEditor = ref(null) // 引用QuillEditor组件
    const sonQuillRef = ref(null) // 引用QuillEditor组件
    const taskPeopleList = ref([])
    function getAllUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data.userDtoList
        })
    }
    // 获取列表
    function getData(flag) {
        if (flag) {
            pagination.value.current = 1
        }
        dataLoading.value = true
        post('/solution-ppm/api/v2/built-in-system-ppm/work_order_template/search', {
            ...state.filter,
            pageSize: pagination.value.pageSize,
            pageNo: pagination.value.current,
            directionField: state.sort
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                state.dataList = data.data
                pagination.value.total = data.data.totalElements
                if (data.data.length > 0) {
                    state.collapseKey.push(String(state.dataList[0].id))
                }
            })
            .finally(() => {
                dataLoading.value = false
            })
    }
    function resetData() {
        state.filter = {
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            status: '',
            timeout: undefined,
            customer: undefined,
            monitorScene: undefined,
            sceneType: undefined,
            keyWords: undefined,
            number: undefined,
            factoryCode: undefined,
            production: undefined,
            pmName: undefined,
            pmoName: undefined,
            environment: undefined,
            createdBy: undefined,
            solverName: undefined,
            factoryType: undefined,
            createdTimeList: []
        }
        pagination.value.current = 1
        pagination.value.pageSize = 10
        getData()
    }

    //     计算解决时间
    function getSolveTime() {
        // 获取当前时间
        let currentDate = dayjs()
        let num = state.modalForm.workHours
        // 计算新时间
        let newDate = currentDate.add(num, 'hour')

        // 格式化新时间为 "YYYY-MM-DD HH:mm" 格式
        let formattedDate = newDate.format('YYYY-MM-DD HH:mm:ss')

        state.modalForm.endTime = formattedDate
    }
    function hanldeTypeChange() {
        if (state.modalForm.type === '产品需求') {
            state.modalForm.priority = 'p3'
            getSolveTimeByType('p3')
        } else {
            state.modalForm.priority = state.modalForm.endTime = state.modalForm.workHours = undefined
        }
    }
    //     根据类型获取解决时间
    function getSolveTimeByType(type) {
        let num = 0
        if (type == 'p0') {
            num = 2
            state.modalForm.workHours = 2
        } else if (type == 'p1') {
            num = 24
            state.modalForm.workHours = 24
        } else if (type == 'p2') {
            num = 48
            state.modalForm.workHours = 48
        } else if (type == 'p3') {
            num = 48
            state.modalForm.workHours = 336
        }
        getSolveTime()
    }
    function handlerDownload(item) {
        pageLoading.loading = true
        pageLoading.tip = '文件下载中...'
        fetch(item.url)
            .then(response => response.blob())
            .then(blob => {
                const downloadLink = document.createElement('a')
                const url = URL.createObjectURL(blob)
                downloadLink.href = url
                downloadLink.setAttribute('download', item.name)
                downloadLink.style.display = 'none'
                document.body.appendChild(downloadLink)
                downloadLink.click()
                document.body.removeChild(downloadLink)

                // Release the object URL after the download
                URL.revokeObjectURL(url)
                pageLoading.loading = false
            })
            .catch(err => {
                console.error('Download failed', err)
            })
    }

    //新需求
    const newState = reactive({
        changeStatusLoading: false,
        isExpandAll: false,
        circulationVisible: false,
        resolvingVisible: false,
        resolvedVisible: false,
        circulationForm: {
            solverList: [],
            status: '流转'
        },
        resolvingForm: {
            solution: '',
            status: '解决中',
            solutionDetail: ''
        },
        resolvedForm: {
            solution: '',
            attachmentList: [],
            status: '已解决',
            solutionDetail: ''
        },
        closeForm: {
            status: '关闭'
        },
        workOrderId: undefined
    })
    //     全部展开
    function handleExpandAll() {
        newState.isExpandAll = true
        state.dataList.forEach(item => {
            state.collapseKey.push(item.id)
        })
    }
    //     全部折叠
    function handleCollapseAll() {
        newState.isExpandAll = false
        state.collapseKey = []
    }

    const styleMap = {
        '未开始': {
            background: '#F6F6F6 !important',
            borderLeft: '2px solid #A9A9A9'
        },
        '待分发': {
            background: '#FFEADC !important',
            borderLeft: '2px solid #FFEADC'
        },
        '已解决': {
            background: '#EDF9E8 !important',
            borderLeft: '2px solid #52C41A'
        },
        '解决中': {
            background: '#EBF1FF  !important',
            borderLeft: '2px solid #3875FF'
        },
        '已关闭': {
            background: '#EBEBEB !important',
            borderLeft: '2px solid #262626'
        },
        '已回访': {
            background: '#EFE6FB !important',
            borderLeft: '2px solid #9254DE'
        }
    }

    // 获取样式
    function getTitleStyle(status) {
        return styleMap[status] || {}
    }
    const colorMap = {
        '未开始': { color: '#A9A9A9' },
        '已解决': { color: '#52C41A' },
        '解决中': { color: '#3875FF' },
        '已关闭': { color: '#262626' },
        '已回访': { color: '#9254DE' },
        '待分发': { color: '#FF7D27' }
    }
    function getColorStyle(status) {
        return colorMap[status] || '#262626'
    }
    const borderMap = {
        '未开始': { borderLeft: '2px solid #A9A9A9' },
        '已解决': { borderLeft: '2px solid #52C41A' },
        '解决中': { borderLeft: '2px solid #3875FF' },
        '已关闭': { borderLeft: '2px solid #262626' },
        '待分发': { borderLeft: '2px solid #FFEADC' }
    }
    function getBorder(status) {
        return borderMap[status] || {}
    }
    // 判断按钮是否可用的计算属性
    function isCirculationDisabled(item) {
        return !(
            (
                (item.status === '未开始' && item.solvers) || // 未开始且有solvers
                (item.status === '解决中' && item.solvers) || // 解决中且有solvers
                (item.status === '待分发' && item.distributed)
            ) // 待分发且distributed为true
        )
    }

    function isResolvingDisabled(item) {
        return !(
            (item.status === '未开始' && item.solvers) ||
            (item.status === '已解决' && item.myCreated) ||
            (item.status === '已关闭' && item.myCreated) ||
            (item.status === '已关闭' && item.pmoOrNot)
        )
    }

    function isResolvedDisabled(item) {
        return (
            // !(item.status === '未开始' && item.solvers) && // 解决人解决中
            !(item.status === '解决中' && item.solvers)
        )
    }

    function isCloseDisabled(item) {
        return (
            !((item.status === '未开始' && item.solvers) || (item.status === '未开始' && item.myCreated)) &&
            !(item.status === '解决中' && item.solvers) &&
            !(item.status === '已解决' && item.myCreated) &&
            !(item.status === '待分发' && item.distributed)
        ) // 创建人或PMO关闭
    }

    function isReturnVisitDisabled(item) {
        return !(item.status === '已关闭' && (item.myCreated || item.pmoOrNot)) // 创建人或PMO回访
    }

    function toggleCollapse(id) {
        const stringId = String(id) // 确保 id 为字符串格式
        if (isActive(stringId)) {
            // 如果当前面板是展开的，移除它的 ID
            state.collapseKey = state.collapseKey.filter(key => String(key) !== stringId)
        } else {
            // 否则，将它的 ID 添加到 collapseKey 中
            state.collapseKey.push(stringId)
        }
    }

    function isActive(id) {
        const stringId = String(id) // 确保 id 为字符串格式
        return state.collapseKey.includes(stringId) // 检查该 ID 是否在 collapseKey 中
    }
    //     获取选项
    function getChildrenSelect(index) {
        // 检查索引是否有效
        if (index === 0) {
            if (!state.modalForm?.headSub?.content) {
                return []
            }
            return [
                {
                    label: state.modalForm.headSub.content,
                    value: state.modalForm.headSub.content
                }
            ]
        }

        // 使用 optional chaining 处理可能的 null/undefined 数据
        let result = (state.modalForm?.subList || [])
            .slice(0, index) // 截取到指定的索引位置
            .filter(item => item?.content) // 过滤掉 content 为空的项
            .map(item => ({
                label: item.content,
                value: item.content
            }))

        // 将 headSub.content 添加到数组头部
        if (state.modalForm?.headSub?.content) {
            result.unshift({
                label: state.modalForm.headSub.content,
                value: state.modalForm.headSub.content
            })
        }

        return result
    }

    function getChildrenQzpdtj(index) {
        if (index === 0) {
            if (state.modalForm?.headSub?.processBranchList?.length > 0) {
                return {
                    selectList: state.modalForm.headSub.processBranchList.map(item => ({
                        label: item?.value,
                        value: item?.value
                    })),
                    hasLcfz: state.modalForm.headSub.processBranchList.some(item => item?.value)
                }
            } else {
                return []
            }
        } else {
            let ylgd = state.modalForm?.subList?.[index]?.dependencyName
            if (ylgd) {
                let data = state.modalForm.subList?.find(item => item?.content === ylgd)

                if (data?.processBranchList) {
                    return {
                        selectList: data.processBranchList.map(item => ({
                            label: item?.value,
                            value: item?.value
                        })),
                        hasLcfz: data.processBranchList.some(item => item?.value)
                    }
                }
            }
        }
    }

    function getPdtj(index) {}
    // 处理选择变化
    // 处理选择变化
    // 开始节点增加/删除SOP
    function handleAddStartSop() {
        state.modalForm.headSub.sopList.push({ value: '' })
        // 使用传入的 name 动态访问相应的数组
    }
    function handleDeleteStartSop(index) {
        if (state.modalForm.headSub.sopList.length == 1) {
            return
        }
        state.modalForm.headSub.sopList.splice(index, 1)
    }
    //     开始节点增加/删除流程分支
    function handleAddStartLcfz() {
        state.modalForm.headSub.processBranchList.push({ value: '' })
        // 使用传入的 name 动态访问相应的数组
    }
    function handleDeleteStartLcfz(index) {
        if (state.modalForm.headSub.processBranchList.length == 1) {
            return
        }
        state.modalForm.headSub.processBranchList.splice(index, 1)
    }
    //     子工单开始节点增加/删除流程分支
    function handleAddSonLcfz(index) {
        state.modalForm.subList[index].processBranchList.push({ value: '' })
        // 使用传入的 name 动态访问相应的数组
    }
    function handleDeleteSonLcfz(index) {
        if (state.modalForm.subList[index].processBranchList.length == 1) {
            return
        }
        state.modalForm.subList[index].processBranchList.splice(index, 1)
    }
    //     子工单开始节点增加/删除流SOP
    function handleAddSonSop(index) {
        state.modalForm.subList[index].sopList.push({ value: '' })
        // 使用传入的 name 动态访问相应的数组
    }
    function handleDeleteSonSop(index) {
        if (state.modalForm.subList[index].sopList.length == 1) {
            return
        }
        state.modalForm.subList[index].sopList.splice(index, 1)
    }
    //     子工单开始节点增加/删除流SOP
    function handleAddSonYlrw(index) {
        state.modalForm.subList[index].ylrwList.push({ ylrw: undefined, branchCondition: undefined })
        // 使用传入的 name 动态访问相应的数组
    }
    function handleDeleteSonYlrw(index) {
        if (state.modalForm.subList[index].ylrwList.length == 1) {
            return
        }
        state.modalForm.subList[index].ylrwList.splice(index, 1)
    }
    //     新建删除子工单
    function handleAddSonGd(index) {
        state.modalForm.subList.push({
            content: '',
            dependencyName: '',
            branchCondition: undefined,
            priority: undefined,
            timeoutFrequencyList: [],
            solverCc: {
                userList: [],
                roleList: [],
                userGroupList: []
            },
            sopList: [{ value: '' }],
            attachmentTemplateList: [],
            processBranchList: [{ value: '' }],
            triggerCc: {
                userList: [],
                roleList: [],
                userGroupList: []
            },
            timeoutCc: {
                userList: [],
                roleList: [],
                userGroupList: []
            },
            timeoutFrequencyList: []
        })
        // 使用传入的 name 动态访问相应的数组
    }
    function handleDeleteSonGd(index) {
        state.modalForm.subList.splice(index, 1)
    }
    // 子上传附件
    function handlerSonUpload(file, index) {
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    // 新文件对象
                    const newFile = {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }

                    // 更新文件列表，去重保留唯一副本
                    state.modalForm.subList[index].attachmentTemplateList = [
                        ...state.modalForm.subList[index].attachmentTemplateList.filter(
                            item => item.uid !== file.uid && item.name !== file.name
                        ),
                        newFile
                    ]
                }
            })
            .catch(e => {
                message.error('上传失败' + e)
            })

        return false
    }

    // 删除文件
    function handlerSonRemove(file, index) {
        state.modalForm.subList[index].attachmentTemplateList = state.modalForm.subList[
            index
        ].attachmentTemplateList.filter(item => item.uid !== file.uid)
    }
    async function getBaseList() {
        // 定义请求接口的 URL 或方法
        const requests = [
            get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.GDLX'), // 工单类型
            get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.YXJ'), // 优先级
            get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.WTLY'), // 问题来源
            get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.CJLX'), // 场景类型
            get('/solution-ppm/api/v2/built-in-system-ppm/work_order_template/user_group'), // 用户组
            get('/solution-ppm/api/v2/built-in-system-ppm/work_order_template/role') // js
        ]

        try {
            // 使用 Promise.allSettled 确保所有请求都会执行
            const results = await Promise.allSettled(requests)

            // 处理每个请求的结果
            results.forEach((result, index) => {
                if (result.status === 'fulfilled') {
                    if (index === 0) {
                        state.gdlxList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        }) // 假设接口返回的字段是 `data`
                    } else if (index === 1) {
                        state.yxjList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        })
                    } else if (index === 2) {
                        state.wtlyList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        })
                    } else if (index === 3) {
                        state.cjlxList = result.value.data.map(item => {
                            return {
                                label: item.itemName,
                                value: item.itemName
                            }
                        })
                    } else if (index === 4) {
                        state.yhzList = result.value.data.map(item => {
                            return {
                                name: item.name
                            }
                        })
                    } else if (index === 5) {
                        state.jsList = result.value.data.map(item => {
                            return {
                                name: item.name
                            }
                        })
                    }
                } else {
                    // 请求失败，打印错误
                    console.error(`接口 ${index + 1} 请求失败:`, result.reason)
                }
            })
        } catch (error) {
            // 捕获任何其他的错误（比如请求数组外的错误）
            console.error('请求出现意外错误:', error)
        }
    }
    function getJkcj(data) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/${data}`).then(data => {
            state.jkcjList = data.data.map(item => {
                return {
                    label: item.itemName,
                    value: item.itemName
                }
            })
        }) // 问题来源
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*样式*/
    .page_root {
        overflow: hidden;
    }
    .body {
        height: 100%;
        background-color: #f0f2f5;
    }
    .top-search {
        height: 120px;
        margin-bottom: 16px;
        border-radius: 4px;
        display: flex;
        gap: 16px;
        justify-content: space-between;
    }
    .top-left {
        width: 100%;
        padding: 16px;
        background-color: #fff;
        border-radius: 4px;
    }
    .top-right {
        border-radius: 4px;
        background-color: #fff;
        padding: 20px 24px;
        padding-right: 36px;
    }
    .right-title {
        display: flex;
        margin-bottom: 8px;
    }
    .title-font {
        font-size: 14px;
        color: rgba(89, 89, 89, 0.65);
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
    }

    .top-search :deep(.ant3-col-6) {
        height: 32px;
    }
    .right-icon {
        display: flex;
    }
    .min-div,
    .left-icon {
        width: 40%;
        display: flex;
        gap: 8px;
    }
    .max-div,
    .right-icon {
        flex: 1;
    }
    .max-div {
        text-align: left;
    }

    .right-icon-content {
        flex: 1;
        display: flex;
        justify-content: space-between;
    }

    .ceycle0,
    .ceycle1,
    .ceycle2,
    .ceycle3 {
        width: 52px;
        height: 22px;
        color: #fff;
        text-align: center;
        line-height: 22px;
        font-weight: 600;
        border-radius: 2px;
    }
    .ceycle0 {
        background-color: #ff2a00;
    }
    .ceycle1 {
        background-color: #ffa940;
    }
    .ceycle2 {
        background-color: #ffa940;
    }
    .ceycle3 {
        background-color: #1890ff;
    }
    .ph-icon,
    .xc-icon,
    .zj-icon {
        width: 72px;
        height: 22px;
        color: #262626;
        text-align: center;
        line-height: 22px;
        font-weight: 600;
        background-color: #d6d6d6;
    }
    .tip {
        display: inline-block;
        width: 60px;
        position: absolute;
        bottom: -20px;
        left: -20px;
        text-align: center;
    }
    .main {
        background-color: #fff;
        height: 100%;
        border-radius: 4px;
        padding: 20px 24px;
        padding-top: 16px;
        position: relative;
    }
    .main-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    /*折叠面板样式*/

    :deep(.ant3-collapse-header) {
        padding: 0 !important;
        border: none !important;
        color: #262626 !important;
        background: rgba(56, 117, 255, 0.1);
    }

    :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
        padding: 0 !important;
    }

    :deep(.ant3-collapse-item) {
        margin-bottom: 8px;
    }

    :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
        border-radius: 4px;
        color: #3875ff;
        background: rgba(56, 117, 255, 0.1);
        position: relative;
        border-radius: 4px 4px 0 0;
    }

    /*折叠面板样式*/
    .collapse-title {
        position: relative;
        width: 100%;
        height: 150px;
        padding: 0 24px;
        align-items: center;
        /* 如果需要保留左右两角的圆角，可以在这里添加 border-radius 样式 */
    }
    .title-border {
        border-bottom: 1px solid #d9d9d9;
    }
    .child-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 24px;
        position: relative;
        border-bottom: 1px solid #d9d9d9;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    //.child-title::before {
    //    content: '';
    //    position: absolute;
    //    top: -1px;
    //    left: -1px;
    //    width: 0;
    //    height: 0;
    //    border-right: 20px solid transparent; /* 控制三角形的大小和方向 */
    //    border-top: 20px solid #ffa940; /* 三角形的颜色 */
    //    border-top-left-radius: 4px;
    //}
    .collapse-title-left {
        display: flex;
        flex-direction: column;
        width: 88px;
        height: 49px;
        justify-content: space-between;
        align-items: center;
        padding-right: 16px;
        border-right: 1px solid #d9d9d9;
    }
    .collapse-title-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .gd-title {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .collapse-title-font,
    .inner-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .border-div {
        position: relative;
    }
    .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -10px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .collapse-title-right-btn {
        display: flex;
        gap: 8px;
    }

    .btn-item {
        position: relative;
        cursor: pointer;
    }
    .border-btn {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #3875ff;
        right: -9px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .active-btn {
        position: absolute !important;
        right: 20px !important;
        top: 58px !important;
        color: #3875ff !important;
        transform: translate(-50%, -50%) !important;
        font-size: 16px !important;
        font-weight: 500;
    }
    .active-icon {
        color: #3875ff;
        transform: rotate(90deg);
    }
    .item-inner {
        display: flex;
        padding: 7px 0;
        background-color: rgba(235, 241, 255);
        border-radius: 0 0 4px 4px;
    }

    .item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 7px 24px;
        border-right: 1px solid #d9d9d9;
        gap: 10px;
    }

    .item-content1,
    .item-content2,
    .item-content3,
    .item-content4 {
        flex: 1; /* 平分宽度 */
    }
    .item-content4 {
        justify-content: start;
    }
    .inner {
        display: flex;
        justify-content: space-between;
    }

    .inner-title {
        text-align: right;
        flex: 0 0 auto; /* 保持标题宽度 */
    }

    .inner-msg {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        flex: 1; /* 占用剩余空间 */
    }
    .inner-msg {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 100%;
        flex: 1;
    }
    .inner-title {
        text-align: right;
    }
    .inner-main {
        display: flex;
        flex: 1;
    }
    .item-children {
        background: #f8f9fa;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .collapse-bottom {
        padding: 16px;
        padding-bottom: 16px;
        margin: 1px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
        background-color: #fff; /* 确保背景色 */
    }

    .item-children .collapse-title {
        padding-right: 16px;
        border-bottom: 1px solid #d9d9d9;
    }
    .child-inner {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .item-children .inner-main {
        position: relative;
    }
    .item-children .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -16px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .pagination-div {
        position: absolute;
        right: 30px;
        bottom: 0;
        padding: 10px;
        background: transparent; /* 可选：为背景添加颜色 */
    }
    .form-content :deep(.ant3-form-item-label) {
        width: 115px;
    }
    .form-content :deep(.ant3-input-number),
    :deep(.ant3-picker) {
        width: 100%;
    }
    :deep(.ql-toolbar) {
        background: #fafafa;
        border: 1px solid #d9d9d9;
        border-radius: 2px 2px 0 0;
    }
    :deep(.ql-blank) {
        min-height: 110px;
        background: #ffffff;
    }
    :deep(.ql-editor) {
        min-height: 110px;
        background: #ffffff;
    }
    .remarks-modal {
        background: #ffffff;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        height: 140px;
    }
    .change-status :deep(.ant3-form-item-label) {
        width: 110px;
    }
    .tip {
        font-weight: 800;
    }
    .father-right {
        max-width: 94%; /* 限制宽度 */
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 13px;
        justify-content: space-between;
    }
    .father-title {
        display: block; /* 确保其为块级元素 */
        max-width: 100%; /* 确保宽度有限制 */
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 显示省略号 */
    }
    .father-bottom {
        display: flex;
        align-items: end; /* 容器垂直底部对齐 */
        gap: 8px;
        justify-content: space-between;
    }
    .father-right-btn {
        display: flex;
        gap: 8px;
    }

    .father-bottom > * {
        align-self: flex-end; /* 内部元素底部对齐 */
    }
    .father-bottom-left {
        display: flex;
        gap: 16px;
    }
    .father-icon {
        font-size: 12px;
        color: #333333;
        position: relative;
        top: -1px;
        margin-right: 4px;
    }
    .father-bgc1 {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url('http://10.40.0.33:9001/file-storage/469958199879835648-source.png');
        background-size: cover;
        position: relative;
        top: 1px;
        margin-right: 4px;
    }
    .father-bgc2 {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url('http://10.40.0.33:9001/file-storage/469958216751423488-source.png');
        background-size: cover;
        position: relative;
        top: 1px;
        margin-right: 4px;
    }
    .father-bgc3 {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url('http://10.40.0.33:9001/file-storage/469958229367889920-source.png');
        background-size: cover;
        position: relative;
        top: 1px;
        margin-right: 4px;
    }
    :deep(.ant3-collapse-item) {
        background: #ffffff;
    }
    .collapse-title-right .border-line {
        right: -8px;
    }
    .gd-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100% - 185px);
    }
    .gd-item {
        margin-bottom: 24px;
    }
    .gd-item:last-child {
        margin-bottom: 5px;
    }
    .solution-div {
        background: rgba(56, 117, 255, 0.1);
        padding: 0 16px;
        padding-bottom: 16px;
    }
    .inner-solution {
        display: flex;
        justify-content: start;
    }
    .top-title {
        height: 16px;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        line-height: 16px;
        color: #262626;
        font-weight: 600;
    }
    .top-tip {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        text-align: justify;
        font-weight: 400;
        background: rgba(250, 100, 0, 0.1);
        border: 1px solid #fa6400;
        border-radius: 2px;
        padding: 6px 16px;
        margin-right: 8px;
    }
    .description-tip {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        background: rgba(250, 100, 0, 0.1);
        border: 1px solid #fa6400;
        border-radius: 2px;
        padding: 6px 16px;
        margin-bottom: 16px;
    }
    .tip-img {
        width: 16px;
        height: 16px;
        color: #fa6400;
    }
    .file-content {
        padding: 16px;
        color: #3875ff;
        cursor: pointer;
    }
    .form-content :deep(.ql-snow .ql-editor) img {
        width: 200px;
    }
    .change-status :deep(.ql-snow .ql-editor) img {
        width: 200px;
    }
    .collapse-content-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .max-length {
        display: inline-block; /* 使得元素能够处理 overflow */
        max-width: 180px; /* 根据需要调整最大宽度 */
        overflow: hidden; /* 隐藏超出部分 */
        white-space: nowrap; /* 不换行 */
        text-overflow: ellipsis; /* 显示省略号 */
    }
    .timeout {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 22px;
        background: #ffbfb3;
        border-radius: 0 4px 0 4px;
        color: #ff2a00;
        text-align: center;
    }
    :deep(
            .ant3-collapse .ant3-collapse-item-disabled > .ant3-collapse-header,
            .ant3-collapse .ant3-collapse-item-disabled
        ) {
        cursor: default;
    }
    .remove-icon :deep(.ant3-select-selection-item-remove) {
        display: none !important;
    }
    /*
新样式
*/
    .son-gd {
    }
    .son-gd-btn {
    }
    .form-title,
    .start-title {
        height: 14px;
        line-height: 14px;
        font-weight: 600;
        color: #262626;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .start-sop,
    .start-lcfz,
    .son-ylrw {
        position: relative;
        width: calc(100% - 150px);
    }
    .start-sop-btn,
    .start-lcfz-btn,
    .son-ylrw-btn {
        position: absolute;
        right: -150px;
        top: 0;
    }
    .form-top,
    .son-top {
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 16px;
    }
    .middle-top,
    .son-middle {
        border-bottom: 1px solid #3875ff;
        margin-bottom: 16px;
    }
    .son-title {
        color: #3875ff;
        display: flex;
        justify-content: space-between;
        height: 24px;
        line-height: 24px;
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 600;
    }
    .collapse-title-top {
        width: 100%;
        display: flex;
        gap: 16px;
        height: 64px;
        justify-content: space-between;
        border-bottom: 1px solid #d9d9d9;
        padding: 21px 0;
    }
    .template-name {
        width: 80%;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .collapse-title-bottom {
        background: rgba(56, 117, 255, 0.1);
    }
    .child-inner {
        display: flex;
        padding: 7px 0;
        border-radius: 0 0 4px 4px;
    }

    .children-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 7px 24px;
        border-right: 1px solid #d9d9d9;
        gap: 10px;
    }

    .children-content1,
    .children-content2,
    .children-content3,
    .children-content4 {
        flex: 1; /* 平分宽度 */
    }
    .child-bottom {
        display: flex;
        gap: 12px;
        flex-direction: column;
        padding: 0 24px;
        padding-bottom: 16px;
    }
    .child-bottom div {
        display: flex;
    }
    .child-file-content {
        display: flex;
        gap: 4px;
    }
    /*
新样式
*/
</style>
